<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="Pragma" content="no-cache"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta http-equiv="x-ua-compatible"content="IE=7"/> 
    <meta name="render" content="webkit"/>
    <title>电桩运营管理系统</title>

    <import type='css' file="css.bootstrap#min" />
    <import type='css' file="css.font-awesome#min" />
    <import type='css' file="css.style" />
    
    <link rel="shortcut icon" href="__ROOT__/favicon.ico" type="image/x-icon" />
    <!--[if lt IE 9]>
    <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <import file="js.jquery-1#11#0#min" />
    <import file="js.bootstrap#min" />
    
   
    <script type="text/javascript">
        $(document).ready(function() {

            addTab($("#navbar a")[0]);
            $("#navbar a").click(function() {
                addTab($(this));
            });

            $('#tabs').on('click','a.tab', function() {
                // Get the tab name
                var contentname = $(this).attr("id") + "_content";

                // hide all other tabs
                $("#content p").hide();
                $("#tabs li").removeClass("current");

                // show current tab
                $("#" + contentname).show();
                $(this).parent().addClass("current");
            });

            $('#tabs').on('click','a.remove', function() {
                // Get the tab name
                var tabid = $(this).parent().find(".tab").attr("id");

                // remove tab and related content
                var contentname = tabid + "_content";
                $("#" + contentname).remove();
                $(this).parent().remove();

                // if there is no current tab and if there are still tabs left, show the first one
                if ($("#tabs li.current").length == 0 && $("#tabs li").length > 0) {

                    // find the first tab    
                    var firsttab = $("#tabs li:first-child");
                    firsttab.addClass("current");

                    // get its link name and show related content
                    var firsttabid = $(firsttab).find("a.tab").attr("id");
                    $("#" + firsttabid + "_content").show();
                }
            });
        });
        function addTab(link) {
            // If tab already exist in the list, return
            if ($("#" + $(link).attr("rel")).length != 0)
                return;
            
            // hide other tabs
            $("#tabs li").removeClass("current");
            $("#content p").hide();

            
            // add new tab and related content
            $("#tabs").append("<li class='current'><a class='tab' id='" +
                $(link).attr("rel") + "' href='javascript:;'>" + $(link).html() + 
                "</a><a href='javascript:;' class='remove'>x</a></li>");

            
            $("#content").append("<p id='" + $(link).attr("rel") + "_content'><iframe class='"+ $(link).attr("rel") + "_content' src='" + $(link).attr("title") + "' scrolling='no' frameborder='0' ></iframe></p>");
            $(document).ready(function(){
                $('.'+$(link).attr("rel") + '_content').load(function(){
                    var mainHeight = $(this).contents().height()+40;
                    $(this).height(mainHeight);
                });
            })
                        
            
            // set the newly added tab as current
            $("#" + $(link).attr("rel") + "_content").show();
        }
    </script>
</head>

<body >
    <header class="header">
        <div class="header-container">
            <div class="fl">
                <a href={:U("Index/index")} class="logo"><img style="height:62px;" id="images" src="__PUBLIC__/img/logo.png"></a>
            </div>
            
            <div class="fr user">
                <div class="search">
                    <form action="" method="">
                        <div class="input-group">
                              <input type="text" class="form-control" placeholder="Search for...">
                              <span class="input-group-btn">
                                <button class="button fa fa-search" type="button"></button>
                              </span>
                        </div>
                    </form>
                </div>
                <div class="user-icon">
                    <img src="__PUBLIC__/img/touxiang.jpg" style="width: 32px;height: 33px">
                    <div class="btn-group">
                      <a class="button" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        北京电桩科技<span class="fa fa-chevron-down"></span>
                      </a>
                      <ul class="dropdown-menu">
                        <li><a href="#">退出登录</a></li>
                        <li><a href="#">账户设置</a></li>
                      </ul>
                    </div>
                </div>
            </div>

        </div>

        </div>
    </header>



<!--     top end     -->